<template>
    <MyCard>
        <el-space>
            <span>按钮名称:</span>
            <el-input placeholder="请输入按钮名称" clearable>
            </el-input>
            <el-button type="primary">查询</el-button>
        </el-space>
    </MyCard>
    <MyCard>
        <el-button type="primary" style="margin-bottom: var(--card-space);"
            @click="onConfirmBtn?.openDialog()">添加权限</el-button>
        <MyTable :columns="columns" :data="permissionData.rows">
            <template #type="scoped">
                <span v-if="scoped.row.type == 'menu'">菜单</span>
                <span v-if="scoped.row.type == 'button'">按钮</span>
            </template>
            <template #action="scoped">
                <el-button link style="border: none;" type="primary"
                    @click="onConfirmBtn?.openDialog(scoped.row)">编辑</el-button>
                <el-button link style="border: none;" type="danger"
                    @click="deletePermission(scoped.row._id)">删除</el-button>
            </template>
            <template #icon='{ row }'>
                <el-icon>
                    <el-icon v-if="row.icon">
                        <component :is="(allIcons as any)[row.icon]"></component>
                    </el-icon>
                </el-icon>
            </template>
            <template #is_show='{ row }'>
                <el-switch v-model="row.is_show" :active-value="1" :inactive-value="0" />
            </template>
        </MyTable>
        <div class="flex-end" style="margin-top: 22px;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 15, 20]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="permissionData.total" />
        </div>
    </MyCard>
    <permissionForm ref="openDialog" @getPermission='getPermission'></permissionForm>
</template>

<script setup lang="ts">
import * as allIcons from '@element-plus/icons-vue'
import permissionForm from './permissionForm.vue'
import { deletePermissionApi, getPermissionApi } from '@/api/permissionManage';
import { onMounted, ref, useTemplateRef, watch } from 'vue';
// const addItem = ref<any>({});
const columns = [
    { label: '按钮名称', prop: 'title' },
    { label: '图标', prop: 'icon' },
    { label: '类型', prop: 'type' },
    { label: '路由路径', prop: 'route_path' },
    { label: '组件路径', prop: 'component_path' },
    { label: '排序', prop: 'order' },
    { label: '是否显示', prop: 'is_show' },
    { label: '操作', prop: 'action', width: 240 },
];
// <el-table - column label = "路由路径" prop = "route_path" > </el-table>
//     < el - table - column label = "组件路径" prop = "component_path" > </el-table-column>
const permissionData = ref<any>({ rows: [] });
const onConfirmBtn: any = useTemplateRef('openDialog');
const pageData = ref({
    currentPage: 1,
    pageSize: 10,
})
watch([pageData,], () => {
    getPermission();
}, { deep: true })
onMounted(() => {
    getPermission();
})

function deletePermission(_id: string) {
    ElMessageBox.confirm(
        '权限数据删除后不可恢复，确认删除?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deletePermissionApi({
                _id, creator: 'zhangjunling',
            })
                .then((res) => {
                    if (res.code == 200) {
                        ElMessage.success('删除成功!');
                        getPermission();
                    } else {
                        ElMessage.error(res.message);
                    }
                })
        })
        .catch(() => { })



}


function getPermission() {
    getPermissionApi({ ...pageData.value, creator: 'zhangjunling' }).then(res => {
        if (res.code == 200) {
            permissionData.value = res.data
        }
    })
}

</script>

<style scoped></style>